<template>
  <div>
    <lab_head :title='"路径名称 - 实验楼"' />

    <body>

      <lab_header />

      <div class="container layout layout-margin-top">

        <ol class="breadcrumb">
          <li><a href="">学习路径</a></li>
          <!-- <li class="active"><a href="/paths/newhand">{{pathlist.name}}</a></li> -->
          <li class="active"><a href=""></a></li>
        </ol>

        <div class="row">
          <div class="col-md-9 layout-body">

            <div
              class="content"
              style="padding:0px"
            >
              <div
                class="path-description"
                style="margin:0px"
              >
                <div
                  class="path-desc-top clearfix"
                  style="background: url('/static/img/1471513740139.png') no-repeat;background-size: cover;"
                >
                  <div class="name-total-box clearfix">
                    <div class="col-md-6 col-sm-6 col-md-offset-1 path-name">
                      <h4></h4>
                    </div>
                    <div class="col-md-3 col-sm-6 col-md-offset-1 path-total-courses">

                    </div>
                  </div>
                  <div class="col-md-10 col-md-offset-1 path-desc-text"></div>
                </div>
                <div class="path-desc-btm">
                  <div class="col-sm-12 col-md-4 clearfix learn-time-div">
                    <div class="col-md-12 text-left need-learn-time">预计需要 <span class="num">0000</span>
                    小时学习
                    </div>
                  </div>
                  <div
                    class="col-sm-12 col-md-8  clearfix text-right"
                    style="padding-top:0px"
                  >
                    <div class="col-xs-12">
                      <span>0000</span>人已加入 &nbsp;&nbsp;&nbsp;&nbsp;

                      <Button class="btn btn-path-operation btn-join-path">加入路径</Button>

                      <p style="font-size:10px;margin-top:5px">加入获得路径课程更新提醒</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="content">
              <ul
                class="nav nav-tabs"
                role="tablist"
              >
                <li
                  role="presentation"
                  class="active"
                >
                  <a
                    href=""
                    aria-controls="path-details"
                    role="tab"
                    data-toggle="tab"
                  >路径详情</a>
                </li>
                <li role="presentation">
                  <a
                    href=""
                    aria-controls="path-comments"
                    role="tab"
                    data-stat="path_comments"
                    data-toggle="tab"
                  >路径评论(<span class="comments-count">1234</span>)</a>
                </li>
              </ul>
              <div class="tab-content">
                <div
                  role="tabpanel"
                  class="tab-pane path-details active"
                  id="path-details">

                  <div class="details-box">
                    <a href="" class="btn start-btn">
                      开始学习
                    </a>
                  <!-- 阶段 -->
                <div v-for="(stage,index) in stage_list" :key="index">
                  <div class="clearfix text-center path-title-box">
                            <span class="line hidden-xs"></span>
                            <span>{{ stage.title }}</span>
                            <span class="line hidden-xs"></span>

                  <!-- 课程 -->
                  <div class="row">
                    <div class="col-md-4 col-sm-6  course" v-for="(course,index) in course_list" :key="index">
                      <a class="course-box" :v-if="stage.id == course.stage">
                          <div class="sign-box">
                              <i class="fa fa-star-o course-follow pull-right" data-follow-url="/courses/63/follow" data-unfollow-url="/courses/63/unfollow" style="display:none"></i>
                          </div>
                          <div class="course-img">
                              <img :alt="course.title" :src="course.img">
                          </div>
                          <div class="course-body">
                              <span class="course-title" data-toggle="tooltip" data-placement="bottom" title="" :data-original-title="course.title">{{ course.title }}</span>
                          </div>
                          <div class="course-footer">
                        <span class="course-per-num pull-left">
                                  <i class="fa fa-users"></i>
                                  {{ course.guanzhu }}
                        </span>
                          </div>
                      </a>
                    </div>
                  </div>
                </div>
              </div>


                    <div class="btn end-pin">完成学习</div>
                  </div>
                </div>
                <div
                  role="tabpanel"
                  class="tab-pane path-comment"
                  id="path-comments"
                >
                  <div class="comment-box">
                    <div class="comment-form">

                      <div class="comment-form-unlogin">
                        请
                        <a
                          href="#sign-modal"
                          data-toggle="modal"
                          data-sign="signin"
                        > 登录 </a>
                        后发表评论
                      </div>

                    </div>
                    <div class="comment-title">最新评论</div>
                    <div class="comment-list"></div>
                    <div class="pagination-container"></div>
                  </div>
                </div>
              </div>
            </div>

          </div>
          <div class="col-md-3 layout-side">

            <user_info />
            <last_paths />
            <QR_code />

          </div>
        </div>
      </div>

      <lab_footer />

    </body>
  </div>
</template>

<script>
import lab_head from './common/lab_head';
import lab_header from './common/lab_header';
import lab_footer from './common/lab_footer';
import user_info from './common/user_info';
import last_paths from './common/last_paths';
import QR_code from './common/QR_code';
import { get_stage } from './axios_api/api'



import { config, formatXml } from '../config.js';
export default {
  data() {
    return {
      path_list: [],
      stage_list: [],
      course_list:[],
    }
  },
  components: {
    lab_head,
    lab_header,
    lab_footer,
    user_info,
    last_paths,
    QR_code,
  },
  mounted() {
    this.show_stage();
  },
  methods: {
    show_stage(){
      var path_id = this.$route.query.path_id;
      get_stage({path_id:path_id}).then((resp)=>{
        this.stage_list = resp.stage;
        this.course_list = resp.course;
        // console.log(this.course_list)

        for (var stage of resp.stage) {
          // console.log(stage.id);
          for (var course of resp.course){
            // console.log(course.stage)
            if (stage.id == course.stage){
              console.log(stage.id + ':' + course.title)
            }
          }
        }


      })
    }


  },
}
</script>

<style>
</style>
